﻿@using Hotel.Application.Dics;
@using Hotel.Application.Menus.Dto;
@using Hotel.Application.Dics.Dto;
@model MenuCreateUpdateDto
@inject IDicService dicService
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 文章管理 iframe 框</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="~/icon-selected/libs/layui/css/layui.css" rel="stylesheet" />
    <style type="text/css">
        .layui-form-item .layui-input-inline {
            width: 249px;
        }

        .layui-input-block {
            margin-right: 22px;
        }

        body .layui-layer-content {
            overflow: visible !important;
        }
    </style>
</head>
<body>
    <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><i class="layui-icon layui-icon-addition"></i>父菜单</label>
                <div class="layui-input-inline">
                    <input type="text" asp-for="ParentId" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-inline">
                    <input type="text" asp-for="MenuName" lay-verify="required" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">菜单类型</label>
                <div class="layui-input-inline">
                    @foreach (var item in await dicService.QueryByCacheAsync(m => m.TypeCode == "MenuType"))
                    {
                        <input asp-for="MenuType" type="radio" value="@item.DicValue" title="@item.DicName" />
                    }
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">菜单路由</label>
                <div class="layui-input-inline">
                    <input type="text" asp-for="MenuRoute" lay-verify="required" placeholder="请输入菜单路由" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图标选择</label>
            <div class="layui-input-block">
                <input type="text" name="icon2" value="layui-icon layui-icon-light" placeholder="请选择" maxlength="16" autocomplete="off" class="layui-input layui-select-icon" id="icon" />
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
            <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
        </div>
    </div>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/layuiadmin/layui/layui.js"></script>
    <script src="~/lay_cascader/cascader/cascader.js"></script>
    <link href="~/lay_cascader/cascader/cascader.css" rel="stylesheet" />
    <script>
        layui.config({
            base: '/layuiadmin/', //静态资源所在路径
            layCascader: 'layCascader'
        }).extend({
            index: 'lib/index',
            iconSelected: "iconSelected/js/index",
        }).use(['index', 'form', 'layCascader', "iconSelected"], function () {
            var form = layui.form;
            var iconSelected = layui.iconSelected;

            /**
            * v2 版本开始保持跟 layui 官方写法同步
            * 使用 render 方法渲染, 并且 v2 开始支持 class 批量绑定
            * v1 版本仅支持 id 绑定, 且初始化是 init
            * 请注意辨别, v2版本于2021年8月19日发布
            * 庆祝码云开放 Gitee Page 功能
            * 本组织下所有开源扩展都会于近期同步升级到v2
            * 都将统一初始化函数为  render
            */            
            iconSelected.render(".layui-select-icon", {
                width: 600,
                event: {                    
                    select(event, data) {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.style(index, {
                            height: '290px',
                            top:'30%'
                        });
                        console.log("选中的图标数据", { event, data });
                    },
                },
            });


            $(document).click(function (event) {
                console.log($(".layui-select-icon").next().next().hasClass("show"));
                
            });
            $(".layui-ext-icon-selected-input").click(function () {
                var index = parent.layer.getFrameIndex(window.name);
                //重新给指定层设定width、top等
                parent.layer.style(index, {
                    height: '550px',
                    top: '6%'
                });
            })

            var opts;
            $.ajax({
                url: "@Url.Action("QueryTreeNodes")",
                type: "get",
                async: false,
                success: function (e) {
                    var layCascader = layui.layCascader;
                    layCascader({
                        elem: '#ParentId',
                        options: e,
                        clearable: true,
                        placeholder: "一级菜单",
                        props: {
                            checkStrictly: true,
                            value: "MenuId",
                            label: "MenuName",
                            children: "Child"
                        }
                    });
                }
            });


            //自定义验证规则
            form.verify({
                otherReq: function (value, item) {
                    var $ = layui.$;
                    var verifyName = $(item).attr('name'),
                        verifyType = $(item).attr('type'),
                        formElem = $(item).parents('.layui-form'),//获取当前所在的form元素，如果存在的话
                        verifyElem = formElem.find('input[name=' + verifyName + ']'),//获取需要校验的元素
                        isTrue = verifyElem.is(':checked'),//是否命中校验
                        focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
                    if (!isTrue || !value) {
                        //定位焦点
                        focusElem.css(verifyType == 'radio' ? { "color": "#FF5722" } : { "border-color": "#FF5722" });
                        //对非输入框设置焦点
                        focusElem.first().attr("tabIndex", "1").css("outline", "0").blur(function () {
                            focusElem.css(verifyType == 'radio' ? { "color": "" } : { "border-color": "" });
                        }).focus();
                        return '必填项不能为空';
                    }
                }
            });


            //监听提交
            form.on('submit(layuiadmin-app-form-submit)', function (data) {
                var field = data.field; //获取提交的字段
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                if (field.ParentId == ""){
                    field.ParentId = 0;
                }
                //提交 Ajax 成功后，关闭当前弹层并重载表格
                $.ajax({
                    url: "@Url.Action()",
                    type: "post",
                    data: field,
                    success: function (e) {
                        layer.msg("添加成功", { icon: 6 }, function () {
                            parent.tableRender();
                            parent.layer.close(index); //再执行关闭
                        });
                    }
                });
                return false;
            });
        })
    </script>
</body>
</html>
